<template>
	<view>
		<u-navbar :title="$t('my.my_product')" placeholder bgColor="#0fbc96" leftIconColor="#FFFFFF"
			titleStyle="color: #FFFFFF" autoBack>
		</u-navbar>
		<view class="pad-left-25 pad-right-25 pad-top-30">
			<CustomTabs :content="content" :list="tabList" @change="tabChange" />
			<up-empty class="empty-centent" v-if="productList.length <= 0" mode="data" :iconSize="56"
				icon="/static/image/empty.png" :text="$t('my.data_empty')">
			</up-empty>
			<view class="record-product mar-top-35">
				<view v-for="item in productList" :key="item.id" class="product-content">
					<view class="head">
						<view class="avatar">
							<image src="/static/image/avatar_ai.png" mode="" />
							<text>{{item.title}}</text>
						</view>
						<view class="flex align-center">
							<view class="state" v-if="item.valid_seconds_now <= 0">{{$t('my.expired')}}</view>
							<view class="state" v-else-if="item.start_status == 1">{{$t('my.in_progress')}}</view>
							<view class="state" v-else-if="item.start_status == 2">{{$t('my.free')}}</view>

							<view class="state mar-left-25" v-if="item.start_status == 2 && Number(item.price) > 0"
								@click="hnadGiveRobot(item)">
								{{$t('my.gifts')}}
							</view>
						</view>
					</view>

					<view class="label-value">
						<view class="color_929292 font-26">
							{{$t('my.freeze_principal')}}： <text class="color_edad14">{{item.init_fund}}</text>
						</view>
						<view class="color_929292 font-26">
							{{$t('my.source')}}： <text class="color_edad14">{{$t('home.contract_purchase')}}</text>
						</view>
						<view class="color_929292 font-26">
							{{$t('home.price')}}： <text class="color_edad14">{{item.price}}</text> USDT
						</view>
						<view class="color_929292 font-26">
							{{$t('my.validity_period')}}： <text class="color_edad14">{{item.valid_days}}</text>
							{{$t('home.day')}}
						</view>
						<!-- 		<view class="color_929292 font-26">
							{{$t('home.start_funds')}}： <text class="color_edad14">{{item.init_fund}}</text> USDT
						</view> -->
						<view class="color_929292 font-26">
							{{$t('home.order_price')}}： <text class="color_edad14">{{item.settle_fund}}</text>
							USDT/{{$t('home.single')}}
						</view>
						<view class="color_929292 font-26">
							{{$t('my.obtaining_time')}}： <text> {{formatTimestamp(item.created_at * 1000) }}</text>
						</view>
						<view class="color_929292 font-26">
							{{$t('my.elapsed_time')}}：<text>
								{{countdown(item.valid_days,item.valid_seconds_now)}}</text>
						</view>
						<view class="color_929292 font-26">
							{{$t('my.remaining_time')}}： <text
								class="color_edad14">{{secondsToDay(item.valid_seconds_now)}}</text>
							{{$t('home.day')}} <text
								class="color_edad14">{{secondsToHours(item.valid_seconds_now)}}</text> {{$t('my.hour')}}
						</view>
						<!-- <view class="color_929292 font-26">
							唯一碼： <text class="color_edad14">f324e68038df191e</text>
						</view> -->
						<template v-if="item.valid_seconds_now > 0">
							<up-button v-if="item.start_status == 2" class="mar-top-35" color="#ffc820"
								@click="handChangeStartStatus(item.id,1)" :customStyle="customStyle"
								:text="$t('my.start_up')"></up-button>
							<up-button v-else-if="item.start_status == 1" class="mar-top-35" color="#ffc820"
								@click="handChangeStartStatus(item.id,2)" :customStyle="customStyle"
								:text="$t('my.close')"></up-button>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>

	<up-modal :show="visibleGive" :cancelText="$t('my.cancel')" :confirmText="$t('confirm')" showCancelButton
		:title="$t('my.gifts_content')" @cancel="visibleGive = false" @confirm="hnadConfirmGiftRobot">
		<view class="slot-content widthB100">
			<up-input :placeholder="$t('my.gifts_content')" v-model="giveParams.to_uid" border="surround"></up-input>
		</view>
	</up-modal>
</template>

<script setup>
	import CustomTabs from '../components/custom-tabs/index.vue'
	import {
		ref,
		reactive,
		watch
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useI18n
	} from 'vue-i18n';
	import {
		pledgeRobotAllOfOwner,
		changeStartStatus,
		giftRobot
	} from '@/api/user'
	import {
		formatTimestamp
	} from '@/util/commonFunction'

	const {
		t
	} = useI18n()

	const customStyle = {
		color: '#000000',
		borderRadius: '10rpx',
		boxShadow: '0 1.2077vw 10rvw rgba(75, 98, 157, .11)'
	}
	const visibleGive = ref(false)
	const giveParams = ref({
		to_uid: "",
		user_robot_id: ""
	});
	const formData = ref({})
	const content = ref(0)
	const tabList = reactive([t('my.all'), t('my.idle'), t('my.running'), t('my.expired')])
	const productList = ref([])
	const tabChange = (event) => {
		productList.value = []
		content.value = event

		switch (content.value) {
			case 0:
				formData.value = {};
				getData();
				break;
			case 1:
				formData.value = {
					start_status: 2,
					valid_seconds_now_gt: 0,
				};
				getData();
				break;
			case 2:
				formData.value = {
					start_status: 1,
					valid_seconds_now_gt: 0
				};
				getData();
				break;
			case 3:
				formData.value = {
					valid_seconds_now: 0
				};
				getData();
				break;
			default:
				break;
		}
	}

	watch(visibleGive.value, (newValue, oldValue) => {
		if (!newValue) {
			giveParams.value = {
				to_uid: "",
				user_robot_id: ""
			}
		}
	});

	const getData = async () => {
		const res = await pledgeRobotAllOfOwner({
			...formData.value
		})

		productList.value = res.data.lists
	}
	// 启动/关闭机器人
	const handChangeStartStatus = async (user_robot_id, start_status) => {
		const res = await changeStartStatus({
			user_robot_id: user_robot_id,
			start_status: start_status
		})
		if (res.code === 200) {
			uni.$u.toast(t('my.operation_successful'));
			tabChange(start_status === 1 ? 2 : 1)
			return;
		}
	}

	// 赠送机器人
	const hnadGiveRobot = (params) => {
		giveParams.value.user_robot_id = params.id;
		visibleGive.value = true;
	};
	const hnadConfirmGiftRobot = async () => {
		if(!giveParams.value.to_uid) return uni.$u.toast(t('my.gifts_content'));;
		const res = await giftRobot(giveParams.value)
		visibleGive.value = false;
		if (res.code === 200) {
			uni.$u.toast(t('my.operation_successful'));
			tabChange(content.value)
			return;
		}
	};
	// 转换为剩余天数
	const secondsToDay = (seconds) => {
		if (seconds <= 0) return 0
		return Math.floor(seconds / (3600 * 24));
	};
	// 转换为剩余小时
	const secondsToHours = (seconds) => {
		if (seconds <= 0) return 0
		return Math.floor(seconds / (3600 * 24) / 3600);
	};
	// 获取进行中倒计时
	const countdown = (valid_days, valid_seconds_now) => {
		const threeDaysInMillis = valid_days * 24 * 60 * 60 * 1000; // 获取当前时间
		const difference = threeDaysInMillis - valid_seconds_now * 1000; // 计算当前时间和目标时间的差值
		if (difference <= 0)
			return `${valid_days} ${t('home.day')} 0 ${t('my.hour')} 0 ${t('my.branch')} 0 ${t('my.second')}`
		// 计算天、时、分、秒
		const days = Math.floor(difference / (1000 * 60 * 60 * 24));
		const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
		const seconds = Math.floor((difference % (1000 * 60)) / 1000);

		return `${days} ${t('home.day')} ${hours} ${t('my.hour')} ${minutes} ${t('my.branch')} ${seconds} ${t('my.second')}`;
	}

	onLoad(() => {
		getData()
	})
</script>

<style lang="scss" scoped>
	.record-product {
		display: flex;
		flex-direction: column;
		gap: 25rpx;

		.product-content {
			overflow: hidden;
			border-radius: 20rpx;
			background: #ffffff;
			box-shadow: 0 .9662vw 2.8986vw rgba(33, 48, 87, .14);
			padding-bottom: 35rpx;

			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 25rpx;
				box-sizing: border-box;
				width: 100%;
				height: 104rpx;
				background: url('/static/image/miner.png') no-repeat;
				background-size: 100% 100%;

				.avatar {
					display: flex;
					align-items: center;

					image {
						width: 51rpx;
						height: 51rpx;
						margin-right: 15rpx;
					}

					text {
						font-size: 32rpx;
						color: #ffffff;
					}
				}

				.state {
					padding: 8rpx 15rpx;
					border-radius: 10rpx;
					background: #339cfb;
					color: #ffffff;
					font-size: 30rpx;
				}
			}

			.label-value {
				margin-top: 25rpx;
				padding: 0 25rpx;
				box-sizing: border-box;
				line-height: 1.8;
			}
		}
	}
</style>